<template>
	<view class="singer-page">
		<!-- 搜索框 -->
		<view class="search-bar">
			<uni-search-bar v-model="searchText" :focus="true" @input="onSearch" clearButton="none" cancelButton="none" placeholder="搜索歌手"></uni-search-bar>
		</view>
		
	
		<!-- 歌手列表 -->
		<view class="singer-list">
			<view v-for="(singer, index) in filteredSingerList" :key="index" class="singer-item" @click="goToSingerDetail(singer.id)">
				<uni-list-item :title="singer.name" :note="singer.desc" showArrow>
					<template v-slot:header>
						<image :src="singer.avatar" class="avatar"></image>
					</template>
				</uni-list-item>
			</view>
		</view>
	</view>
</template>

<script>
	import { singerList } from '../../commons/mock.js';
	export default {
		name: 'SingerPage',
		data() {
			return {
				// 歌手列表数据
				singerList: singerList,
				// 搜索关键字
				searchText: ''
			};
		},
		computed: {
			// 根据搜索关键字过滤歌手列表
			filteredSingerList() {
				if (!this.searchText.trim()) {
					return this.singerList;
				}
				
				const keyword = this.searchText.toLowerCase();
				return this.singerList.filter(singer => {
					// 搜索歌手名称
					return singer.name.toLowerCase().includes(keyword);
				});
			}
		},
		methods: {
			// 搜索输入事件处理
			onSearch(e) {
				// 这里可以添加搜索防抖逻辑
				// 或者其他搜索相关的处理
			},
			// 跳转到歌手详情页面
			goToSingerDetail(singerId) {
				uni.navigateTo({
					url: `/pages/singer-detail/singer-detail?id=${singerId}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.singer-page {
		// 搜索栏
		.search-bar {
			width: 100%;
			background-color: #00c273;
		}
		

		// 歌手列表
		.singer-list {
			padding: 0 20rpx;
			
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 40rpx;
			}
		}
	}
</style>